<template>
  <view class="agreement-modal" v-if="visible">
    <view class="modal-mask" @tap="handleMaskClick"></view>
    <view class="modal-content">
      <!-- 标题栏 -->
      <view class="modal-header">
        <view class="modal-title">服务协议与隐私政策</view>
        <view class="close-btn" @tap="handleClose">✕</view>
      </view>
      
      <!-- 协议内容 -->
      <scroll-view class="modal-body" scroll-y="true">
        <view class="agreement-content">
          <view class="agreement-section">
            <view class="section-title">服务协议</view>
            <view class="section-content">
              <text>1. 本服务由WiFi认证系统提供，用于为用户提供免费WiFi网络接入服务。</text>
              <text>2. 用户使用本服务需要完成微信授权，我们仅获取您的基本信息用于网络认证。</text>
              <text>3. 用户需要观看指定时长的广告内容，以获得免费网络使用权限。</text>
              <text>4. 网络使用时长根据不同场所政策而定，一般为24小时有效期。</text>
              <text>5. 禁止利用本网络进行违法违规活动，如发现将立即断开连接。</text>
              <text>6. 本服务方对网络质量和稳定性不承担绝对保证责任。</text>
            </view>
          </view>
          
          <view class="agreement-section">
            <view class="section-title">隐私政策</view>
            <view class="section-content">
              <text>1. 我们承诺保护您的个人隐私，仅收集认证必需的基本信息。</text>
              <text>2. 收集的信息包括：微信昵称、头像、设备标识等。</text>
              <text>3. 这些信息仅用于网络认证和服务优化，不会用于其他商业目的。</text>
              <text>4. 我们不会向第三方出售、出租或以其他方式披露您的个人信息。</text>
              <text>5. 您有权要求查看、更正或删除您的个人信息。</text>
              <text>6. 如有隐私相关问题，请联系网络管理员。</text>
            </view>
          </view>
        </view>
      </scroll-view>
      
      <!-- 底部操作区 -->
      <view class="modal-footer">
        <view class="checkbox-area">
          <checkbox 
            :checked="agreed" 
            @tap="toggleAgreement"
            color="#1890ff"
          />
          <text class="checkbox-text" @tap="toggleAgreement">
            我已阅读并同意以上协议和政策
          </text>
        </view>
        <view class="button-area">
          <button class="cancel-btn" @tap="handleClose">取消</button>
          <button 
            class="confirm-btn" 
            :disabled="!agreed"
            @tap="handleConfirm"
          >
            同意并继续
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'AgreementModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      agreed: false
    }
  },
  methods: {
    // 切换同意状态
    toggleAgreement() {
      this.agreed = !this.agreed
    },
    
    // 处理遮罩点击
    handleMaskClick() {
      // 可选择是否允许点击遮罩关闭
      // this.handleClose()
    },
    
    // 关闭弹窗
    handleClose() {
      this.agreed = false
      this.$emit('close')
    },
    
    // 确认同意
    handleConfirm() {
      if (!this.agreed) {
        uni.showToast({
          title: '请先同意协议',
          icon: 'none'
        })
        return
      }
      
      this.$emit('confirm', {
        agreed: true,
        timestamp: Date.now()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.agreement-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: relative;
  width: 680rpx;
  max-height: 80vh;
  background: #fff;
  border-radius: 24rpx;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  padding: 40rpx 40rpx 20rpx;
  border-bottom: 2rpx solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.close-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #999;
  border-radius: 30rpx;
  background: #f5f5f5;
}

.modal-body {
  flex: 1;
  padding: 20rpx 40rpx;
  max-height: 50vh;
}

.agreement-content {
  padding-bottom: 20rpx;
}

.agreement-section {
  margin-bottom: 40rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  padding-bottom: 16rpx;
  border-bottom: 2rpx solid #1890ff;
}

.section-content {
  text {
    display: block;
    font-size: 28rpx;
    color: #666;
    line-height: 1.8;
    margin-bottom: 16rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.modal-footer {
  padding: 20rpx 40rpx 40rpx;
  border-top: 2rpx solid #f0f0f0;
}

.checkbox-area {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  
  checkbox {
    margin-right: 16rpx;
  }
}

.checkbox-text {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.button-area {
  display: flex;
  gap: 20rpx;
}

.cancel-btn, .confirm-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 30rpx;
  font-weight: bold;
  
  &::after {
    border: none;
  }
}

.cancel-btn {
  background: #f5f5f5;
  color: #666;
  border: none;
}

.confirm-btn {
  background: #1890ff;
  color: #fff;
  border: none;
  
  &:disabled {
    background: #d9d9d9;
    color: #fff;
  }
}
</style> 